<script setup lang="ts">
import { onMounted, ref } from 'vue';

interface WeatherConfig {
  city: string;
  showForecast: boolean;
}

interface CurrentWeather {
  temperature: number;
  description: string;
  condition: string;
  humidity: number;
  windSpeed: number;
  visibility: number;
  feelsLike: number;
}

interface ForecastDay {
  day: string;
  condition: string;
  description: string;
  high: number;
  low: number;
}

const props = defineProps<{
  config: WeatherConfig;
}>();

// 模拟天气数据
const currentWeather = ref<CurrentWeather>({
  temperature: 22,
  description: '晴朗',
  condition: 'sunny',
  humidity: 65,
  windSpeed: 12,
  visibility: 10,
  feelsLike: 25,
});

const forecast = ref<ForecastDay[]>([
  { day: '今天', condition: 'sunny', description: '晴', high: 28, low: 18 },
  { day: '明天', condition: 'cloudy', description: '多云', high: 26, low: 16 },
  { day: '后天', condition: 'rainy', description: '小雨', high: 22, low: 14 },
  { day: '周四', condition: 'sunny', description: '晴', high: 30, low: 20 },
]);

const getWeatherIcon = (condition: string) => {
  const icons: Record<string, string> = {
    sunny: '☀️',
    cloudy: '☁️',
    rainy: '🌧️',
    snowy: '❄️',
    foggy: '🌫️',
    windy: '💨',
  };
  return icons[condition] || '☀️';
};

// 模拟获取天气数据
const fetchWeatherData = async () => {
  // 这里应该调用真实的天气API
  // 现在使用模拟数据
  console.warn(`获取${props.config.city}的天气数据`);
};

onMounted(() => {
  fetchWeatherData();
});
</script>

<template>
  <div class="weather-card">
    <div class="card-header mb-4">
      <h3 class="flex items-center text-lg font-semibold">
        <el-icon class="mr-2">
          <component is="Sunny" />
        </el-icon>
        {{ config.city }}天气
      </h3>
    </div>

    <div class="current-weather mb-4">
      <div class="flex items-center justify-between">
        <div class="temperature-section">
          <div class="current-temp text-4xl font-bold text-blue-600">
            {{ currentWeather.temperature }}°
          </div>
          <div class="weather-desc text-gray-600">
            {{ currentWeather.description }}
          </div>
        </div>
        <div class="weather-icon text-6xl">
          {{ getWeatherIcon(currentWeather.condition) }}
        </div>
      </div>

      <div class="weather-details mt-4 grid grid-cols-2 gap-4 text-sm">
        <div class="detail-item flex items-center">
          <el-icon class="mr-2 text-blue-500">
            <component is="Drizzling" />
          </el-icon>
          <span>湿度: {{ currentWeather.humidity }}%</span>
        </div>
        <div class="detail-item flex items-center">
          <el-icon class="mr-2 text-green-500">
            <component is="WindPower" />
          </el-icon>
          <span>风速: {{ currentWeather.windSpeed }}km/h</span>
        </div>
        <div class="detail-item flex items-center">
          <el-icon class="mr-2 text-orange-500">
            <component is="View" />
          </el-icon>
          <span>能见度: {{ currentWeather.visibility }}km</span>
        </div>
        <div class="detail-item flex items-center">
          <el-icon class="mr-2 text-purple-500">
            <component is="Thermometer" />
          </el-icon>
          <span>体感: {{ currentWeather.feelsLike }}°</span>
        </div>
      </div>
    </div>

    <div v-if="config.showForecast" class="forecast-section">
      <h4 class="mb-3 text-sm font-semibold text-gray-700">未来几天</h4>
      <div class="forecast-list space-y-2">
        <div
          v-for="(day, index) in forecast"
          :key="index"
          class="forecast-item flex items-center justify-between rounded bg-gray-50 p-2"
        >
          <div class="day-info flex items-center space-x-3">
            <span class="day-name w-12 text-sm font-medium">{{ day.day }}</span>
            <span class="weather-icon text-lg">
              {{ getWeatherIcon(day.condition) }}
            </span>
            <span class="weather-desc text-sm text-gray-600">
              {{ day.description }}
            </span>
          </div>
          <div class="temp-range text-sm">
            <span class="high-temp font-semibold">{{ day.high }}°</span>
            <span class="low-temp ml-1 text-gray-500">{{ day.low }}°</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.weather-card {
  height: 100%;
  padding: 20px;
  color: white;
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  border-radius: 12px;
}

.weather-card .card-header h3 {
  color: white;
}

.current-temp {
  color: white !important;
}

.weather-details .detail-item {
  color: rgb(255 255 255 / 90%);
}

.forecast-section h4 {
  color: rgb(255 255 255 / 90%);
}

.forecast-item {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
  backdrop-filter: blur(10px);
}

.forecast-item .day-name,
.forecast-item .weather-desc,
.forecast-item .temp-range {
  color: rgb(255 255 255 / 90%);
}

.forecast-item .low-temp {
  color: rgb(255 255 255 / 60%) !important;
}
</style>
